<template>
<transition name="fade">
  <div class="box">
    <div class="photo-header">
      <router-link to="/time" tag="i" class="iconfont icon-fanhui"></router-link>
      <h2>时光机</h2>
    </div>
    <div class="photo-content">
       <!-- <div class="mengban" v-show="list.power == 1">
          <div class="photo-detail" @click="mengbanNo">
            <img src="./../../assets/baby1.jpg" alt="">
            <div class="username">小萌宝</div>
            <span>2018.12.1</span><i class="iconfont icon-fenxiangfangshi"></i>
            <p>宝宝第一次见到雪的样子，真是个没见过世面的宝宝！！！</p>
          </div>
        </div> -->
      <p>2018.12.13</p>
      <ul>
        <li v-for="(item, index) in list" :key="index" >
          <div class="mengban" v-show="switchName[index].seen"  @click="mengbanNo(index)">
            <div class="photo-detail">
              <img :src="item.img" alt="">
              <div class="username">小萌宝</div>
              <span>2018.12.1</span><i class="iconfont icon-fenxiangfangshi"></i>
              <p>小萌宝啊小萌宝！我的小萌宝~ 哈哈哈哈哈</p>
            </div>
          </div>
          <img @click="show(index)" :src="item.img" alt="">
        </li>
      </ul>
    </div>
  </div>
</transition>
</template>

<script>
import Vue from 'vue'
import { PaletteButton } from 'mint-ui'
Vue.component(PaletteButton.name, PaletteButton)

export default {
  data () {
    return {
      list: [
        {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545061516943&di=59083b7abdcaf021e932a615627e8df9&imgtype=0&src=http%3A%2F%2Fwx3.sinaimg.cn%2Flarge%2F72cbf277ly1fq6e3bb57jj20cx096jsv.jpg'
        },
        {
          img: 'http://img06.tooopen.com/images/20180411/tooopen_sy_238755293359.jpg'
        },
        {
          img: 'http://img07.tooopen.com/images/20170810/tooopen_sy_219812276912.jpg'
        },
        {
          img: 'http://img06.tooopen.com/images/20180411/tooopen_sy_238749946543.jpg'
        },
        {
          img: 'http://img06.tooopen.com/images/20180411/tooopen_sy_238748016898.jpg'
        },
        {
          img: 'http://img06.tooopen.com/images/20180411/tooopen_sy_238745834959.jpg'
        },
        {
          img: 'http://img07.tooopen.com/images/20170227/tooopen_sy_199852016431.jpg'
        }
      ],
      switchName: [
        {
          seen: false
        },
        {
          seen: false
        },
        {
          seen: false
        },
        {
          seen: false
        },
        {
          seen: false
        },
        {
          seen: false
        },
        {
          seen: false
        }
      ]
    }
  },
  methods: {
    show (index) {
      console.log(index)
      this.switchName[index].seen = true
    },
    mengbanNo (index) {
      this.switchName[index].seen = false
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.photo-header {
  @include rect(100%, 0.42rem);
  background: #f8eaca;
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
  }
}
.photo-content {
  @include rect(100%, 100%);
  overflow: auto;
  p {
    width: 100%;
    line-height: 0.25rem;
    text-indent: 0.2rem;
  }
  ul {
    width: 94%;
    margin-left: 1.8%;
    li {
      margin-bottom: 0.09rem;
      margin-left: 0.12rem;
      float: left;
      img {
        @include rect(1.64rem, auto);

      }
    }
  }
  .mengban {
    position: fixed;
    top: 0;
    left: 0;
    @include rect(100%, 100%);
    background: rgba(189, 188, 188, 0.637);
    // display: none;
    .photo-detail {
      margin: 0.6rem auto;
      border-radius: 0.12rem;
      background-color: rgba(242, 242, 242, 1);
      @include rect(3.36rem, 5.11rem);
      img {
        @include rect(3.06rem, 3.4rem);
        border-radius: 0.12rem;
        margin-left: 0.14rem;
        margin-top: 0.1rem;
      }
      .username {
        width: 3.04rem;
        height: 0.22rem;
        line-height: 0.3rem;
        font-size: 0.14rem;
        margin-left: 0.17rem;
        margin-top: 0.1rem;
        border-top: 1px solid #b4b4b4;
        text-indent: 0.06rem;
      }
      span {
        display: inline-block;
        color: rgba(153, 153, 153, 1);
        font-size: 0.12rem;
        margin-left: 0.2rem;
        font-family: PingFangSC-regular;
      }
      i {
        @include rect(0.2rem, 0.2rem);
        text-align: center;
        line-height: 0.2rem;
        background: #c7c6c6;
        border-radius: 0.03rem;
        float: right;
        margin-right: 0.2rem;
        margin-top: -0.08rem;
      }
      p {
        @include rect(3.06rem, auto);
        margin-left: 0.2rem;
        text-indent: 0rem;
      }
    }
  }
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: all 5s;
}
.slide-enter-to, .slide-leave {
  transform: translateX(0%);
}
.slide-leave-active {
  transition: all 0s;
}
</style>
